<template>
  <div class="page">
    <swiper :show-dots="false" v-model="swiper_index" :height="'75vh'" :loop="true" :on-index-change="swiperChange()">
      <swiper-item :class="getMainClass(0)">
        <div class="swiper-page">
          <div class="head">
            {{productData.nutritive}}
          </div>
          <div class="content">
            <flexbox>
              <flexbox-item><h2 style="font-size: 1.7rem;text-align: right">{{productData.goodsTtile}}</h2></flexbox-item>
              <flexbox-item><img style="width: 20vh" :src="$base.imgPath+productData.materialImgUrl"></flexbox-item>
              <!--<flexbox-item><img style="width: 20vh" src="../../assets/tomato.png"></flexbox-item>-->
            </flexbox>
            <div class="list">
              <div class="row">
                <div class="title">品牌：</div>
                <div class="label">桃娃</div>
              </div>
              <div class="row">
                <div class="title">原产地：</div>
                <div class="label">北京·平谷</div>
              </div>
              <div class="row">
                <div class="title">储存方式：</div>
                <div class="label">冰箱冷藏保存，0-4℃最佳 </div>
              </div>
            </div>
          </div>
        </div>
      </swiper-item>
      <swiper-item :class="getMainClass(1)">
        <div class="head">
          {{enterpriseData.notes}}
        </div>
        <div class="content">
          <h2 style="font-size: 1.7rem;text-align: center;margin: 2vh 0 20px;">{{enterpriseData.name}}</h2>
          <div style="font-size: 1.2rem;padding: 0 60px;">
            <table>
              <tr valign="top"><td style="text-align: right"><span class="key">电话：</span></td><td>{{enterpriseData.tel}}</td></tr>
              <tr valign="top"><td style="text-align: right"><span class="key">公司地址：</span></td><td>{{enterpriseData.address}}</td></tr>
            </table>
          </div>
          <div class="logo">
            <img class="right" src="../../assets/product/logo.png">
            <img :src="$base.serverPath+enterpriseData.logoImg">
          </div>
          <!--<img style="width: 100%" src="../../assets/product/qiye.png">-->

        </div>
      </swiper-item>
      <swiper-item :class="getMainClass(2)">
        <div class="head head3">
          {{enterpriseData.children[0].notes}}
        </div>
        <div class="content">
          <h2 style="font-size: 1.7rem;text-align: center;margin: 2vh 0 0;color: red">{{enterpriseData.children[0].name}}</h2>
          <p style="font-size: 1.2rem;text-align: center;color: #666">坐标位置：
            <span style="color:#70aa2f">({{formatDegree(enterpriseData.children[0].latitude)}}N,{{formatDegree(enterpriseData.children[0].longitude)}}E)</span></p>
          <label class="map_label">{{enterpriseData.children[0].name}}</label>
          <img style="width: 90%;margin: 0 5%;" src="../../assets/product/map.png">
        </div>
      </swiper-item>
    </swiper>
    <div class="swiper-left" v-on:click="swiperGo(-1)">
      <x-icon type="ios-arrow-left" size="30"></x-icon>
    </div>
    <div class="swiper-right" v-on:click="swiperGo(1)">
      <x-icon type="ios-arrow-right" size="30"></x-icon>
    </div>
    <div class="foot">
      <flexbox style="text-align: center">
        <flexbox-item>
          <div v-on:click="footImgClick(0)">
            <img v-if="swiper_index == 0" src="../../assets/product/cp_s.png">
            <img v-else src="../../assets/product/cp.png">
          </div>
        </flexbox-item>
        <flexbox-item>
          <div v-on:click="footImgClick(1)">
            <img v-if="swiper_index == 1" src="../../assets/product/qy_s.png">
            <img v-else src="../../assets/product/qy.png">
          </div>
        </flexbox-item>
        <flexbox-item>
          <div v-on:click="footImgClick(2)">
            <img v-if="swiper_index == 2" src="../../assets/product/jd_s.png">
            <img v-else src="../../assets/product/jd.png">
          </div>
        </flexbox-item>
      </flexbox>
    </div>
  </div>
</template>

<script>
  import {Flexbox, FlexboxItem, Swiper, SwiperItem} from 'vux'

  export default {
    data() {
      return {
        swiper_index: 0,
        productData:this.$utils.getData("productData").useDefPara,//产品数据
        enterpriseData:this.$utils.getData("enterpriseData"),//企业数据
      }
    },
    components: {
      Flexbox,
      FlexboxItem,
      Swiper,
      SwiperItem
    },
    methods: {
      formatDegree(value){
        ///<summary>将度转换成为度分秒</summary>
        value = Math.abs(value);
        var v1 = Math.floor(value);//度
        var v2 = Math.floor((value - v1) * 60);//分
        var v3 = Math.round((value - v1) * 3600 % 60);//秒
        return v1 + '°' + v2 + '\'' + v3 + '"';
      },
      footImgClick(index) {
        this.swiper_index = index
      },
      swiperGo(i) {
        this.swiper_index = this.swiper_index + i;
      },
      getMainClass(index){
        if(index == this.swiper_index){
          return "main"
        }else{
          return "noshow"
        }
      },
      swiperChange() {
      }
    }
  }
</script>
<style lang="less" scoped>

  .head {
    border: 1px solid #70aa2f;
    color: #666;
    margin: 5vh 20px 10px;
    padding: 13px;
    font-size: 1.2rem;
    border-radius: 15px;
    text-align: center;
    display: inline-block;
    color: @theme-color;
  }

  .list {
    padding: 0 11vw;
  }

  .list .row {
    display: flex;
    border-bottom: 1px solid #ccc;
    padding: 2px 10px;
  }

  .list .row .title {
    color: @theme-color;
    font-weight: bold;
    flex: 0 0 auto;
    width: 8rem;
    text-align: right;
  }

  .list .row .label {
    color: #999;
    font-size: 1.5rem;
  }

  .foot {
    margin: 0 15vw;
    height: 25vh;
  }

  .foot img {
    width: 18vw;
  }
  .content{
    position: relative;
  }
  .content .key{
    width: 80px;
    display: inline-block;
  }
  .map_label{
    position: absolute;
    left: 50%;
    top: 26vw;
    font-size: 1.2rem;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 2px 5px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    color: #000;
  }
  .map_label:after{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    left: 50px;
    top: 23px;
    border-left: 7px solid transparent;
    border-top: 7px solid rgba(255, 255, 255, 0.7);
    border-right: 7px solid transparent;
    border-bottom: 7px solid transparent;
  }
  .noshow{
    opacity: 0;
  }

  /*动画*/
  .main .content{
    animation: opacityA 2s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  .main .content .map_label{
    animation: opacityA 1s 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  .main .head{
    animation: opacityA 1s 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  .main .head3{
    animation: opacityA 1s 2s;
    animation-fill-mode: forwards;
    opacity: 0;
  }
  .foot {
    animation: opacityA 1s;
  }

  .logo{
    background: url("../../assets/product/logo_bg.png");
    text-align: center;
    height: 200px;
    margin-top: 10px;
  }
  .logo img{
    height: 90%;
  }
  .logo .right{
    position: absolute;
    width: 110px;
    height: 70px;
    right: 10px;
  }

  @keyframes opacityA {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
</style>
